import React from 'react';
import { useTranslation } from 'react-i18next';
import { useVoiceRecognition } from '../../hooks/useVoiceRecognition';

export const VoiceTest: React.FC = () => {
  const { t } = useTranslation();
  const {
    status,
    isListening,
    currentText,
    error,
    startListening,
    stopListening,
    resetText
  } = useVoiceRecognition({
    userId: 1,
    onResult: (result) => {
      // console.log('语音识别结果:', result);
    },
    onError: (error) => {
      // console.error('语音识别错误:', error);
      console.error('voice recognition error',error);
    }
  });

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>{t('chat.voiceTest.title')}</h2>
      
      {/* 状态显示 */}
      <div style={{ marginBottom: '20px' }}>
        <p><strong>{t('chat.voiceTest.status')}:</strong> {status}</p>
        <p><strong>{t('chat.voiceTest.isListening')}:</strong> {isListening ? t('chat.voiceTest.yes') : t('chat.voiceTest.no')}</p>
        {error && (
          <p style={{ color: 'red' }}>
            <strong>{t('chat.voiceTest.error')}:</strong> {error}
          </p>
        )}
      </div>

      {/* 控制按钮 */}
      <div style={{ marginBottom: '20px' }}>
        <button
          onClick={startListening}
          disabled={isListening}
          style={{
            marginRight: '10px',
            padding: '10px 20px',
            backgroundColor: isListening ? '#ccc' : '#4CAF50',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: isListening ? 'not-allowed' : 'pointer'
          }}
        >
          {isListening ? t('chat.voiceTest.listening') : t('chat.voiceTest.startRecognition')}
        </button>

        <button
          onClick={stopListening}
          disabled={!isListening}
          style={{
            marginRight: '10px',
            padding: '10px 20px',
            backgroundColor: !isListening ? '#ccc' : '#f44336',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: !isListening ? 'not-allowed' : 'pointer'
          }}
        >
          {t('chat.voiceTest.stopRecognition')}
        </button>

        <button
          onClick={resetText}
          style={{
            padding: '10px 20px',
            backgroundColor: '#2196F3',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          {t('chat.voiceTest.clearText')}
        </button>
      </div>

      {/* 识别结果显示 */}
      <div>
        <h3>{t('chat.voiceTest.recognitionResult')}:</h3>
        <div style={{
          border: '1px solid #ddd',
          borderRadius: '4px',
          padding: '15px',
          minHeight: '100px',
          backgroundColor: '#f9f9f9',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word'
        }}>
          {currentText || t('chat.voiceTest.noResult')}
        </div>
      </div>

      {/* 使用说明 */}
      <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
        <h4>{t('chat.voiceTest.usage')}:</h4>
        <ul>
          <li>{t('chat.voiceTest.instruction1')}</li>
          <li>{t('chat.voiceTest.instruction2')}</li>
          <li>{t('chat.voiceTest.instruction3')}</li>
          <li>{t('chat.voiceTest.instruction4')}</li>
          <li>{t('chat.voiceTest.instruction5')}</li>
        </ul>
      </div>
    </div>
  );
}; 